<template>
	<div class="home">
		<div class="rules">
			<div class="rule">
				<div class="todayrule">
					<div class="identifying">今日限行尾号</div>
					<div style="
                font-size: 40px;
                margin-bottom: 50%;
                color: rgb(209, 217, 224);
              ">
						{{ limitRule }}
					</div>
				</div>
				<div style="
              height: 100%;
              width: 3%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            ">
					<div style="height: 80%; width: 1px; background-color: rgb(97, 97, 97)"></div>
				</div>
				<div class="nextdayrule">
					<div class="identifying">明日限行尾号</div>
					<div style="
                font-size: 40px;
                margin-bottom: 50%;
                color: rgb(209, 217, 224);
              ">
						{{ nextDayLimitRule }}
					</div>
				</div>
			</div>
		</div>
		<div style="width: 70%;">
			<el-form label-position="top" label-width="auto" :model="porp" style="max-width: 600px" disabled>
				<el-form-item label="所属队伍">
					<el-input v-model="porp.teamname" />
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="porp.teamphone" />
				</el-form-item>
				<el-form-item label="驻扎地点">
					<el-input v-model="porp.grcoation" />
				</el-form-item>
				<el-form-item label="队伍状态">
					<el-input  :value="getStateText(porp.state)"/>
				</el-form-item>
			</el-form>
		</div>
	</div>


</template>

<script setup lang="ts">
	import {
		reactive,
		ref,
		onMounted,
		defineExpose,
		computed,
		onBeforeUnmount,
	} from "vue";
	import { Edit, Delete } from "@element-plus/icons-vue";
	import { ElMessage, ElMessageBox } from "element-plus";
	import zhCn from "element-plus/dist/locale/zh-cn.mjs";
	import en from "element-plus/dist/locale/en.mjs";
	import { useAuthStore } from "../../../store/auth";
	import { getTeams } from "../../../api/d_user/setup/index.js"

	const loginuser = useAuthStore();
	const currentTime = ref(getCurrentTime());
	const currentDate = ref(getCurrentDate());
	const limitRule = ref(getLimitRule());
	const nextDayLimitRule = ref(getNextDayLimitRule());
	const porp = reactive({
		teamname: '',
		state: '',
		grcoation: '',
		teamphone: '',
	})

	const statetype = {
		0: "空闲",
		1: "任务中",
	};

	const getStateText = (state) => {
		return statetype[state];
	};
	
	function getCurrentTime() {
		const now = new Date();
		const hours = String(now.getHours()).padStart(2, "0");
		const minutes = String(now.getMinutes()).padStart(2, "0");
		const seconds = String(now.getSeconds()).padStart(2, "0");
		return `${hours}:${minutes}:${seconds}`;
	}
	function getCurrentDate() {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, "0");
		const day = String(now.getDate()).padStart(2, "0");
		return `${year}-${month}-${day}`;
	}

	function getLimitRule() {
		const today = new Date();
		const dayOfWeek = today.getDay();
		const date = today.getDate();

		if (dayOfWeek === 0 || dayOfWeek === 6) {
			return "不限行";
		} else {
			if (date % 2 === 0) {
				return "单号";
			} else {
				return "双号";
			}
		}
	}

	function getNextDayLimitRule() {
		const tomorrow = new Date();
		tomorrow.setDate(tomorrow.getDate() + 1);
		const dayOfWeek = tomorrow.getDay();

		if (dayOfWeek === 0 || dayOfWeek === 6) {
			return "不限行";
		} else {
			const date = tomorrow.getDate();
			if (date % 2 === 0) {
				return "单号";
			} else {
				return "双号";
			}
		}
	}

	const updateDateTimeAndLimitRule = () => {
		currentTime.value = getCurrentTime();
		currentDate.value = getCurrentDate();
		limitRule.value = getLimitRule();
		nextDayLimitRule.value = getNextDayLimitRule();
	};

	const language = ref("zh-cn");
	const locale = computed(() => (language.value === "zh-cn" ? zhCn : en));

	const toggle = () => {
		language.value = language.value === "zh-cn" ? "en" : "zh-cn";
	};
	const viofre = ref([
		// {
		//   time: "", //时间
		//   viofre: "", //违章
		//   fine: "", //罚款
		//   depo: "", //扣分
		//   state: "", //状态
		// },
	]);

	const statusDict = {
		0: "未处理",
		1: "已处理",
	};

	async function getDate() {
		const record = await getTeams(loginuser.user.username);
		porp.teamname = record.data.teamname
		porp.state = record.data.state
		porp.grcoation = record.data.grcoation
		porp.teamphone = record.data.teamphone
	}

	onMounted(() => {
		const timerId = setInterval(updateDateTimeAndLimitRule, 1000);
		onBeforeUnmount(() => {
			clearInterval(timerId);
		});
		getDate();
	});
</script>

<style scoped lang="scss">
	.home {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: white;
	}

	.rules {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		height: 50%;
	}

	.rule {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80%;
		border-radius: 10px;
		background-color: rgba(117, 135, 138, 0.7);
	}

	.todayrule {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 80%;
	}

	.nextdayrule {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 80%;
	}

	.identifying {
		font-size: 24px;
		margin-bottom: 55%;
		background-color: rgba(115, 151, 171, 0.8);
		color: rgb(209, 217, 224);
		width: 100%;
		height: 15%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.p-10px {
		width: 100%;
		height: 85%;
		margin-top: 0%;
		position: relative;
		overflow: auto;
	}



	.test {
		position: absolute;
		width: 95%;
		height: 95%;
		margin-left: 2.5%;
		margin-top: 10pt;
	}

	.screen {
		width: 220px;
	}

	.pagination-block {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-message-box__message {
		text-align: center;
	}
</style>../../../api/o_user/person/index.js